<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对联识别</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div style="max-width: 600px; margin: 50px auto;">
    <h1>对联上下联识别</h1>
    <form id="coupletForm">
        <div>
            <label>输入1：</label>
            <input type="text" name="sentence1" style="width: 300px;">
        </div>
        <div style="margin: 15px 0;">
            <label>输入2：</label>
            <input type="text" name="sentence2" style="width: 300px;">
        </div>
        <button type="button" onclick="identify()">识别</button>
    </form>

    <div id="result" style="margin-top: 30px; padding: 20px; border: 1px solid #ccc;">
        <p>识别结果：</p>
        <div id="output"></div>
    </div>
</div>

<script>
    function identify() {
        $.post('api/couplet/identify', $('#coupletForm').serialize(), function(res){
            if(res.code === 200) {
                const data = res.data;
                let html = `<p>上联：${data.上联}</p>
                          <p>下联：${data.下联}</p>`;
                $('#output').html(html);
            } else {
                alert('识别失败：' + res.msg);
            }
        });
    }
</script>
</body>
</html>